<template>
  <view class="page">
    <view class="search">
      <uni-search-bar bgColor="#fff" placeholder="请输入标题-年份-期数" v-model="query.info"
        @confirm="searchInit"></uni-search-bar>
      <view class="icon" @click="moreSearch">
        <uni-icons type="bars" size="30"></uni-icons>
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" @click="handleEvaluate(item, index)">
        <uni-list>
          <uni-list-item title="标题" :rightText="item.title" />
          <uni-list-item title="年份" :rightText="item.year" />
          <uni-list-item title="期数" :rightText="item.period" />
          <uni-list-item title="街道" :rightText="item.street_title" />
          <uni-list-item title="村" :rightText="item.village_title" />
          <uni-list-item title="村类别" :rightText="item.village_type" />
          <uni-list-item title="审核员" :rightText="item.auditor_name" />
          <uni-list-item title="整改限时" :rightText="item.expire_time" />
          <uni-list-item title="转接限时" :rightText="item.move_time" />
          <uni-list-item title="状态">
            <template v-slot:footer>
              <view class="state">
                <view style="color: #909399" v-if="item.state == 0">未提交</view>
                <view style="color: #f56c6c" v-if="item.state == 1">村(整改+初审)</view>
                <view style="color: #f56c6c" v-if="item.state == 2">街道(初审)</view>
                <view style="color: #f56c6c" v-if="item.state == 3">第三方考评员(复审)</view>
                <view style="color: #f56c6c" v-if="item.state == 4">区级审核员(终审)</view>
                <view style="color: #67c23a" v-if="item.state == 5">结束</view>
              </view>
            </template>
          </uni-list-item>
          <uni-list-item title="问题总数" :rightText="item.issue_sum" />
          <uni-list-item title="问题通过数" :rightText="item.issue_pass_sum" />
          <uni-list-item title="问题不通过数" :rightText="item.issue_no_pass_sum" />
        </uni-list>
      </view>

    </view>
    <view class="add" @click="to('/pages/evaluate/add')" v-if="user.type == 1">
      <uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
    </view>
    <view class="user" @click="to('/pages/user/index')">
      <image :src="user.icon" mode="widthFix" />
    </view>
    <view class="loading">
      <uni-load-more :status="loading ? 'loading' : 'noMore'"></uni-load-more>
    </view>
    <!-- 搜索 -->
    <uni-popup ref="moreSearch" background-color="#fff">
      <view class="more-search">
        <view class="back">
          <uni-nav-bar left-icon="left" title="搜索更多" @clickLeft="moreSearchBack" />
        </view>
        <view class="form">
          <view class="item" v-if="user.type == 1">
            <view class="title">街道</view>
            <view class="select">
              <view class="value" @click="openSearchSelect('street')">{{ query.street ? query.street.name : '请选择' }}
              </view>
              <view class="clear" v-if="query.street" @click="query.street = ''">清 除</view>
            </view>
          </view>

          <view class="item" v-if="user.type == 1">
            <view class="title">村</view>
            <view class="select">
              <view class="value" @click="openSearchSelect('village')">{{ query.village ? query.village.name : '请选择' }}
              </view>
              <view class="clear" v-if="query.village" @click="query.village = ''">清 除</view>
            </view>
          </view>
          <!-- <view class="item">
            <view class="title">考评员</view>
            <view class="select">
              <view class="value" @click="openSearchSelect('user1')">{{ query.user1 ? query.user1.name : '请选择' }}
              </view>
              <view class="clear" v-if="query.user1" @click="query.user1 = ''">清 除</view>
            </view>
          </view> -->

          <view class="item">
            <view class="title">审核员</view>
            <view class="select">
              <view class="value" @click="openSearchSelect('user2')">{{ query.user2 ? query.user2.name : '请选择' }}
              </view>
              <view class="clear" v-if="query.user2" @click="query.user2 = ''">清 除</view>
            </view>
          </view>
          <view class="item">
            <view class="title">状态</view>
            <view class="select">
              <view class="value" @click="openSearchSelect('state')">{{ query.state ? query.state.name : '请选择' }}
              </view>
              <view class="clear" v-if="query.state" @click="query.state = ''">清 除</view>
            </view>
          </view>
          <button type="primary" @click="searchInit">搜 索</button>
        </view>

      </view>

    </uni-popup>

    <!-- 下拉框 -->
    <uni-popup ref="select" background-color="#fff" @change="selectChange">
      <view class="select-popup">
        <view class="search">
          <uni-easyinput v-model="select.search" placeholder="请输入标题"></uni-easyinput>
        </view>
        <view class="list" v-if="select.show">
          <radio-group @change="radioChange">
            <label class="item" v-for="(item, index) in filterSearchSelect()">
              <view class="radio">
                <radio :value="index" />
              </view>
              <view class="label">{{ item.name }}</view>
            </label>
          </radio-group>
        </view>
      </view>
    </uni-popup>

    <!-- 整改限时 -->
    <uni-calendar ref="expireTimeCalendar" :date="editExpireTime.expire_time" :insert="false"
      @confirm="editExpireTimeConfirm" :showMonth="false" />
  </view>
</template>
<script>
import { getEvaluate, getSearchSelect, getStreetVillage, delEvaluate, editEvaluateExpireTime } from "@/api/evaluate";
export default {
  data() {
    return {
      loading: false,
      list: [],
      query: {
        info: '',
        state: '',
        page: {
          current: 1,
          size: 5,
        },
      },
      select: {
        search: '',
        list: [],
        type: '',
        show: false
      },
      //街道
      street: [],
      //村
      village: [],
      //考评员
      user1: [],
      //审核员
      user2: [],
      // 状态
      state: [{ name: '未提交', id: 0 }, { name: '村(整改+初审)', id: 1 }, { name: '街道(初审)', id: 2 }, { name: '第三方考评员(复审)', id: 3 }, { name: '区级审核员(终审)', id: 4 }, { name: '结束', id: 5 }],
      user: {},//当前登录
      // 修改整改限时
      editExpireTime: {
        id: '',
        expire_time: ''
      }
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.query.page.current = 1;
    this.list = [];
    this.getEvaluate();
  },
  // 上拉到底触发
  onReachBottom() {
    this.query.page.current++;
    this.getEvaluate();
  },
  methods: {
    // 修改整改限时
    editExpireTimeConfirm(time) {
      editEvaluateExpireTime({ id: this.editExpireTime.id, expire_time: time.fulldate }).then(res => {
        uni.showToast({ title: res.info });

        // 动态修改时间 用于不刷新页面
        this.list.forEach(item => {
          if (item.id == this.editExpireTime.id) item.expire_time = time.fulldate;
        })

        // 清空
        this.editExpireTime.id = '';
        this.editExpireTime.expire_time = '';

      })
    },
    // 选择弹出层
    selectChange(val) {
      this.select.show = val.show;
    },
    // 删除考评
    del(id, index) {
      delEvaluate(id).then(res => {
        uni.showToast({ title: '删除成功', icon: 'none' });
        this.list.splice(index, 1);
      })
    },
    // 点击考评
    handleEvaluate(item, index) {
      let itemList = [];
      // 审核员
      if (this.user.type == 1) itemList = ['编辑', '修改状态', '修改整改限时', '删除'];
      // 街道管理、村管理员
      if (this.user.type == 3 || this.user.type == 4) itemList = ['编辑'];
      uni.showActionSheet({
        itemList: itemList,
        success: (res) => {
          // 编辑
          if (itemList[res.tapIndex] == '编辑') {
            uni.navigateTo({ url: '/pages/evaluate/edit?id=' + item.id });
          }
          // 修改状态
          if (itemList[res.tapIndex] == '修改状态') {
            uni.navigateTo({ url: '/pages/evaluate/editState?id=' + item.id + '&state=' + item.state });
          }
          // 修改整改限时
          if (itemList[res.tapIndex] == '修改整改限时') {
            this.editExpireTime.id = item.id;
            this.editExpireTime.expire_time = item.expire_time;
            this.$refs.expireTimeCalendar.open();
            // uni.navigateTo({ url: '/pages/evaluate/editExpireTime?id=' + item.id + '&expireTime=' + item.expire_time });
          }
          // 删除
          if (itemList[res.tapIndex] == '删除') {
            uni.showModal({
              title: '提示',
              content: '确定删除吗?',
              success: (res) => {
                if (res.confirm) this.del(item.id, index);
              }
            });
          }
        },
      });
    },
    //  跳转
    to(url) {
      uni.navigateTo({ url })
    },
    // 搜索初始化
    searchInit() {
      this.query.page.current = 1;
      this.list = [];
      this.getEvaluate();
      this.$refs.moreSearch.close();
    },
    // 搜索街道、村、考评员、审核员
    getSearchSelect() {
      getSearchSelect().then(res => {
        let data = res.data;
        data.street.forEach(item => {
          this.street.push({ 'name': item.title, 'id': item.id });
        });
        data.user1.forEach(item => {
          this.user1.push({ 'name': item.username, 'id': item.id });
        });
        data.user2.forEach(item => {
          this.user2.push({ 'name': item.username, 'id': item.id });
        });
      })
    },
    // 搜索街道下的村
    getStreetVillage() {
      getStreetVillage({ 'street_id': this.query.street.id }).then(res => {
        let data = res.data;
        this.village = [];
        this.query.village = '';
        data.village.forEach((item) => {
          this.village.push({ name: item.title, id: item.id, user_name: item.user_name });
        });
      })
    },
    // 选择
    radioChange(item) {
      this.query[this.query.type] = this.select.list[item.detail.value];
      // 选择街道的时候
      if (this.query.type == 'street') this.getStreetVillage();
      this.$refs.select.close();
    },
    // 筛选下拉框选项
    filterSearchSelect() {
      if (!this.select.search) return this.select.list;
      return this.select.list.filter((item) => item.name.includes(this.select.search));
    },
    // 打开搜索下拉框
    openSearchSelect(field) {
      this.select.list = this[field];
      this.query.type = field;
      this.$refs.select.open('bottom');
    },
    // 隐藏更多搜索
    moreSearchBack() {
      this.$refs.moreSearch.close();
    },
    // 更多搜索
    moreSearch() {
      this.$refs.moreSearch.open("bottom");
    },
    // 搜索考评
    getEvaluate() {
      this.loading = true;
      let query = { ...this.query };
      // 查询权限
      var user = this.user;
      // 考评员
      if (user.type == "1") query["user_id"] = user.id;
      // 街道管理员
      if (user.type == "3") {
        query["street_user_id"] = user.id;
        if (query["state"] === "") query["state"] = "1,2,3,4,5";
      }
      // 村管理员
      if (user.type == "4") {
        query["village_user_id"] = user.id;
        if (query["state"] === "") query["state"] = "1,2,3,4,5";
      }

      getEvaluate(query).then((res) => {
        let data = res.data;
        if (!data.length && this.query.page.current != 1) this.query.page.current--;
        this.loading = false;
        data.forEach((item) => {
          this.list.push(item);
        });
        uni.stopPullDownRefresh();
        // 页面加载结束
        setTimeout(() => uni.hideLoading(), 250);
      });
    },
    // 设置不同用户搜索的状态
    setUserSearchState() {
      let user = this.user;
      // 考评员
      if (user.type == "1") {
        this.state = [
          { name: '未提交', id: 0 },
          { name: '村(整改+初审)', id: 1 },
          { name: '街道(初审)', id: 2 },
          { name: '第三方考评员(复审)', id: 3 },
          { name: '区级审核员(终审)', id: 4 },
          { name: '结束', id: 5 }
        ];
      }
      // 街道管理员
      if (user.type == "3") {
        this.state = [
          { name: '村(整改+初审)', id: 1 },
          { name: '街道(初审)', id: 2 },
          { name: '第三方考评员(复审)', id: 3 },
          { name: '区级审核员(终审)', id: 4 },
          { name: '结束', id: 5 }
        ];
      }
      // 村管理员
      if (user.type == "4") {
        this.state = [
          { name: '村(整改+初审)', id: 1 },
          { name: '街道(初审)', id: 2 },
          { name: '第三方考评员(复审)', id: 3 },
          { name: '区级审核员(终审)', id: 4 },
          { name: '结束', id: 5 }
        ];
      }
    },
  },
  onShow() {
    // 未登录跳转
    if (!uni.getStorageSync('user')) uni.reLaunch({ url: '/pages/login/index' });
  },
  created() {
    if (uni.getStorageSync('user')) {
      this.user = JSON.parse(uni.getStorageSync('user'));
      if (!this.user.icon) this.user.icon = '/static/images/user.png';
      uni.showLoading({ title: "加载中" });
      this.getEvaluate();
      this.getSearchSelect();
      this.setUserSearchState();
    }
  },
};
</script>
<style lang="scss" scoped>
.page {
  position: relative;

  >.list {
    padding-left: 20rpx;
    padding-right: 20rpx;

    ::v-deep .uni-list {
      border-radius: 12rpx;
      overflow: hidden;
      margin-bottom: 30rpx;

      .uni-list--border-top,
      .uni-list--border-bottom {
        display: none;
      }
    }

    .state {
      font-size: 25rpx;
    }
  }

  >.search {
    padding-left: 20rpx;
    padding-right: 20rpx;
    display: flex;
    align-items: center;

    ::v-deep uni-search-bar,
    ::v-deep .uni-searchbar {
      flex: 1;
      padding-left: 0;
    }

    .icon {
      .uni-icons {
        color: #999 !important;
      }

    }
  }

  // 添加
  >.add {
    position: fixed;
    bottom: 100rpx;
    right: 60rpx;
    width: 90rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50%;
    background-color: #2c77f6;
    text-align: center;

    .uni-icons {
      color: #fff !important;
    }

    &:active {
      opacity: 0.9;
    }
  }

  >.refresh {
    position: fixed;
    bottom: 440rpx;
    right: 60rpx;
    width: 90rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50%;
    background-color: #2c77f6;
    text-align: center;

    .uni-icons {
      color: #fff !important;
    }

    &:active {
      opacity: 0.9;
    }
  }

  >.user {
    position: fixed;
    bottom: 220rpx;
    right: 60rpx;
    width: 90rpx;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    image {
      width: 80%;
    }
  }

  // 更多搜索
  .more-search {
    height: 80vh;

    box-sizing: border-box;

    .form {
      padding: 0 30rpx;

      .item {
        margin: 40rpx 0;

        .title {
          margin-bottom: 20rpx;
        }


        .select {
          display: flex;
          align-items: center;

          .value {
            border: 1px solid #eee;
            border-radius: 12rpx;
            line-height: 70rpx;
            padding: 0 20rpx;
            color: #666;
            font-size: 26rpx;
            cursor: pointer;
            flex: 1;
          }

          .clear {
            margin: 0 20rpx;
            color: #999;
          }
        }
      }
    }
  }

  ::v-deep .uni-navbar--border {
    border-bottom-color: #eee !important;
  }

  // 下拉框
  .select-popup {
    height: 60vh;
    padding: 20rpx;
    background-color: #f9f8f8;
    overflow-x: hidden;

    .list {
      background-color: #fff;
      margin-top: 20rpx;
      border-radius: 12rpx;
      overflow: hidden;

      .item {
        display: flex;
        border-bottom: 1px solid #eee;
        line-height: 90rpx;
        padding: 0 20rpx;

        .radio {
          margin-right: 20rpx;
        }

        &:last-child {
          border-bottom: 0px;
        }

        .label {
          font-size: 28rpx;
          margin-top: 5rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>